<template>
  <view id="balance">
    <view class="head">
      <view class="headleft">
        <view class="headtit">账户余额（元）</view>
        <view class="headnum">{{ balance }}</view>
        <view class="headtext">交易记录</view>
      </view>
      <image src="@/static/index/bagbg.png" class="headright" mode="widthFix" />
    </view>
    <view class="body">
      <view class="bodytit">储存金额</view>
      <view class="sonbox">
        <view
          class="son"
          :class="{ sonshow: item.check }"
          v-for="(item, i) in sonlist"
          :key="i"
          @click="showstate(i, item)"
        >
          <text class="sonnum">{{ item.num }}</text
          >元
        </view>
      </view>
      <view class="state" v-if="stateshow">
        <view class="statetit">使用说明</view>
        <view class="statetext">
          1.储值成功后，不可退款，请根据自己的消费情况充值。<br />
          2.储值余额不可提现，不可转移、转赠。<br />
          3.储值金额按国家法律、法规开具符合规定的发票，后续凭储值余额消费时，不再开具发票。如需发票请至亲雪点单小程序个人中心联系客服<br />
          4.储值不累计会员成长值、积分与宝石，订单消费时以实际订单支付金额累计会员成长值、积分与宝石。<br />
          5.储值余额可在奈雪的茶内地线下门店、奈雪酒屋全国门店、亲雪点单小程序在线支付使用。
        </view>
      </view>
    </view>
    <view class="botbox">
      <view class="bottop">
        <checkbox-group @change="changebox">
          <checkbox :value="checkVal" :checked="sign"></checkbox>
        </checkbox-group>
        <view class="bottit"
          >我已阅读并同意<text style="color: #b2bc45">《储值协议》</text></view
        >
      </view>

      <button class="botbut" @click="submit(newnum)">购买</button>
    </view>
  </view>
</template>


<script setup>
import { computed, ref, reactive } from "vue";
import { useStore } from "vuex";

const store = useStore();
const balance = computed(() => store.state.userdata.balance);

// 选择钱数
const newnum = ref("");
const sonlist = ref([
  {
    num: "100",
    check: false,
  },
  {
    num: "200",
    check: false,
  },
  {
    num: "300",
    check: false,
  },
  {
    num: "400",
    check: false,
  },
  {
    num: "600",
    check: false,
  },
  {
    num: "800",
    check: false,
  },
]);
const stateshow = ref(false);
const showstate = (i, item) => {
  // console.log(item.num,1223);
  sonlist.value.forEach((item, index) => {
    item.check = index === i;
    if (index === i) {
      // 只有当当前项被选中时，才将其 num 值赋给 newnum
      newnum.value = item.num;
      console.log(newnum.value, 1111);
    }
  });
  stateshow.value = sonlist.value.some((item) => item.check);
};
// 选择钱数
// 多选框
const sign = ref(false);
const checkVal = ref("0");
const changebox = (e) => {
  if (e.detail.value == "0") {
    sign.value = true;
  } else {
    sign.value = false;
  }
};
// 多选框
// 提交
const submit = (newBalance) => {
  //判断stateshow是否为true，判断多选框是否选中
  if (stateshow.value && sign.value === true) {
    store.commit('addBalance', Number(newBalance)); 
    console.log("提交");
    uni.showToast({
      title: "充值成功",
      icon: "success",
      duration: 2000,
      success: function () {
        setTimeout(function () {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      },
    });
  } else {
    console.log("不提交");
    uni.showToast({
      title: "请阅读并同意储值协议",
      icon: "none",
    });
  }
  // stateshow.value && sign.value ? console.log("提交") : console.log("不提交");
};
</script>

<style lang="scss">
#balance {
  width: 100%;
  box-sizing: border-box;
  .head {
    width: 94%;
    aspect-ratio: 2.8;
    margin: auto;
    margin-top: 30rpx;
    padding: 40rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .headleft {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .headnum {
        font-weight: bold;
        font-size: 40rpx;
      }
      .headtext {
        color: #b2bf4b;
      }
    }
    .headright {
      width: 300rpx;
      margin-right: 20rpx;
    }
  }
  .body {
    width: 94%;
    margin: auto;
    .bodytit {
      font-size: 40rpx;
      font-weight: bold;
    }
    .sonbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .son {
      width: 31.5%;
      aspect-ratio: 1.5;
      margin-top: 20rpx;
      background-color: #f0f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #525456;
      font-size: 24rpx;
      .sonnum {
        font-size: 40rpx;
        font-weight: bold;
      }
    }
    .sonshow {
      width: 31.5%;
      aspect-ratio: 1.5;
      margin-top: 20rpx;
      background-color: #adb838;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24rpx;
      .sonnum {
        font-size: 40rpx;
        font-weight: bold;
      }
    }
    .state {
      margin-top: 50rpx;
      .statetit {
        font-size: 40rpx;
        font-weight: bold;
      }
      .statetext {
        margin-top: 20rpx;
        color: #939395;
        font-size: 28rpx;
      }
    }
  }
  .botbox {
    width: 100%;
    height: 16vh;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    box-shadow: #525456 0rpx 0rpx 5rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    .bottop {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
    .botbut {
      border-radius: 50rpx;
      color: #fff;
      background-color: #adb838;
    }
  }
}
</style>
